import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
// 注意这个引入, 在组件中引入 router 是 'vue-router', 在 js 文件中 是引入本地 router文件夹, 并且默认导出不需要加 {}
import  router  from '@/router/index.js'
// 创建axios实例
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 10000
})


// axios请求拦截器
http.interceptors.request.use(config => {
  // 1.从 pinia 获取 token 数据
  const userStore = useUserStore()
  const token = userStore.userInfo.token
  if(token) {
  // 2. 按照后端的要求拼接token数据
  config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => Promise.reject(error))

// axios响应式拦截器
http.interceptors.response.use(res => res.data, error => {
  // 统一错误提示
  ElMessage.error(error.response.data.message)
  // 401 token失效处理
  if (error.response.status === 401) {
    const userStore = useUserStore()
    userStore.clearUserInfo()
    router.push('/login')
  }
  return Promise.reject(error)
})


export default http
